<%@ page import="com.onlinevideo.entity.Video" %>
<%@ page import="java.util.List" %>
<%@ page import="com.onlinevideo.service.impl.CategoryServiceImpl" %>
<%@ page import="com.onlinevideo.entity.Category" %>
<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="java.util.Map" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>视频列表</title>
    <link rel="stylesheet" href="../static/css/font-awesome.css">
    <link href="../static/css/bootstrap.min.css" rel="stylesheet">
    <link href="../static/css/bootstrap-theme.min.css" rel="stylesheet">
    <script src="../static/js/jquery-1.11.3.min.js" type="text/javascript"></script>
    <script src="../static/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="../static/js/sweetalert.min-2.1.2.js" type="text/javascript"></script>
    <script src="../static/js/jquery.cookies.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(function () {
            //查询视频点击事件
            $(".queryVideo").click(function () {
                var videoId = $("input[type='radio']:checked").attr("data-id");
                console.log(videoId)
                $("#insertVideoItem").val(videoId)
                $.ajax({
                    url: "../video.do",
                    type: "GET",
                    data: {
                        "action": "queryVideoItemByVideoId",
                        "videoId": videoId
                    },
                    success: function (data) {
                        console.log(data)
                        var parse = JSON.parse(data);
                        console.log(parse)
                        $("#videoItemInfo").empty();
                        for (var i = 0; i < parse.length; i++) {
                            var videoItemBtn = "<td><button class='btn btn-primary queryVideoItem' data-toggle='modal' data-target='#queryVideoModal' data-src='" + parse[i].url + "' data-id='" + parse[i].id + "'>查看视频</button><button class='btn btn-primary editVideoItem' data-toggle='modal' data-target='#editVideoItemModal'  data-id='" + parse[i].id + "'>修改</button><button class='btn btn-danger delete'  data-id='" + parse[i].id + "'>删除</button></td>";
                            $("#videoItemInfo").append("<tr class='tr' data-id='" + parse[i].id + "'><td>" + (i + 1) + "</td><td>" + parse[i].name + "</td>" + "<td>" + parse[i].sortCount + "</td>" + videoItemBtn + "</tr>");
                        }
                    }
                })
            })
            var container_name;
            var container_sortCount;
            $("body").on("click", ".editVideoItem", function () {
                $("#updateVideoItemInfo").attr("data-id", $(this).attr("data-id"));
                container_name = $(this).parents("tr").find("td").eq(1)
                container_sortCount = $(this).parents("tr").find("td").eq(2)

            });
            //修改子集信息
            $("#updateVideoItemInfo").click(function () {
                console.log("开始修改");
                var $editVideoItemName = $("#editVideoItemName");
                var name = $editVideoItemName.val();
                var $editSortCount = $("#editSortCount");
                var sortCount = $editSortCount.val();
                var id = $(this).attr("data-id");
                $.ajax({
                    url: "../videoItem.do",
                    type: "GET",
                    data: {
                        "action": "updateInfo",
                        "name": name,
                        "videoItemId": id,
                        "sortCount": sortCount
                    },
                    success: function (data) {
                        var result = JSON.parse(data);

                        if (result.code > 0) {
                            swal("提示", result.message, "success").then(function (isOk) {
                            });
                        } else {
                            swal("警告", result.message, "error").then(function (isOk) {
                            });
                        }
                        container_name[0].innerHTML = name
                        container_sortCount[0].innerHTML = sortCount
                    }
                });
            });
            //修改视频信息
            $("#editVideoBtn").click(function () {
                var videoId = $("input[type='radio']:checked").attr("data-id");
                var file = $("#selectImgFile")[0].files[0];
                var videoName = $("#editVideoName").val();
                var videoDes = $("#editVideoDes").val()
                var videoCategory = $("#videoCategory option:selected").val();
                var formData = new FormData();
                formData.append("action", "updateVideoInfo");
                formData.append("videoId", videoId);
                formData.append("videoName", videoName);
                formData.append("videoDes", videoDes);
                formData.append("videoCategoryId", videoCategory);
                formData.append("videoImg", file);
                $.ajax({
                    url: "../video.do",
                    type: "POST",
                    data: formData,
                    processData: false, //必须false才会避开jQuery对 formdata 的默认处理
                    contentType: false, //必须false才会自动加上正确的Content-Type
                    success: function (data) {
                        console.log(data)
                        var result = JSON.parse(data);
                        console.log(result)
                        if (result.code > 0) {
                            window.location.reload();
                        }
                    }
                });
            });

            $("#updateVideoItem").click(function () {
                var $r = $(".vid:checked").parents("tr").find("td");
                console.log($r[1].innerHTML);
                console.log($r[2].innerHTML);
                $("#sortCount").val($r[2].innerHTML);
                $("#name").val($r[1].innerHTML);
            });
            //动态绑定查看视频事件
            $("body").on("click", ".queryVideoItem", function () {
                var src = $(this).attr("data-src");
                var src1 = $("#videoItemSrc").attr("src");
                if (src != src1) {
                    $("#videoItemSrc").attr("src", src);
                }
                $('#videoItemSrc').trigger('play');
            });
            //关闭视频模态框触发暂停事件
            $("#queryVideoModal .clo").click(function () {
                $('#videoItemSrc').trigger('pause');
            });
            //编辑视频事件
            $(".editVideo").click(function () {
                var $r = $("input[type='radio']:checked").parents("tr").find("td");
                var videoName = $r[2].innerHTML.trim();
                var videoDes = $r[6].innerHTML.trim();
                var videoImg = $r[5].firstChild.getAttribute("src");
                console.log(videoImg)
                $("#editVideoModal #editVideoName").val(videoName);
                $("#editVideoModal #editVideoDes").val(videoDes);
                $("#editVideoModal #editVideoImg").attr("src", videoImg);
            });

            //删除视频事件
            $(".deleteVideo").click(function () {
                var videoId = $("input[type='radio']:checked").attr("data-id");
                $.ajax({
                    url: "../video.do",
                    type: "post",
                    data: {
                        "action": "deleteVideo",
                        "videoId": videoId
                    },
                    success: function (data) {
                        var result = JSON.parse(data);
                        if (result.code == "1") {
                            swal("提示", result.message, "success").then(function (isOk) {

                            });
                        } else {
                            swal("警告", result.message, "error").then(function (isOk) {
                            });

                        }
                        location.reload();
                    }
                })
            });
            //添加视频子集
            $("#insertVideoItem").click(function () {
                var videoId = $("input[type='radio']:checked").attr("data-id");
                var formData = new FormData();
                var file = $("#addVideoItem")[0].files[0];
                formData.append("action", "insert");
                formData.append("videoId", videoId);
                formData.append("videoItem", file);
                $.ajax({
                    url: "../videoItem.do",
                    type: "POST",
                    data: formData,
                    processData: false, //必须false才会避开jQuery对 formdata 的默认处理
                    contentType: false, //必须false才会自动加上正确的Content-Type
                    success: function (data) {
                        console.log(data)
                        var result = JSON.parse(data);
                        console.log(result)
                        if (result.code == "1") {
                            var videoItemBtn = "<td><button class='btn btn-primary queryVideoItem' data-toggle='modal' data-target='#queryVideoModal' data-src='" + result.data.url + "' data-id='" + result.data.id + "'>查看视频</button><button class='btn  btn-primary editVideoItem' data-toggle='modal' data-target='#editVideoItemModal'  data-id='" + result.data.id + "'>修改</button><button class='btn btn-danger delete'  data-id='" + result.data.id + "'>删除</button></td>";
                            $("#videoItemInfo").append("<tr class='tr'><td>" + result.data.videoId + "</td><td>" + result.data.name + "</td>" + "<td>" + result.data.sortCount + "</td>" + videoItemBtn + "</tr>");
                        }
                    }
                });

            });
            //删除视频子集
            $("body").on("click", ".delete", function () {
                var $1 = $(this);
                $.ajax({
                    url: "../videoItem.do",
                    type: "GET",
                    data: {
                        "action": "delete",
                        "videoItemId": $(this).attr("data-id")
                    },
                    success: function (data) {
                        console.log($1)
                        if ("1" == data) {
                            $1.parents("tr").remove();
                        }
                    }
                });
            });

            //选择图片事件
            $("#selectImgFile").change(function (event) {
                var objUrl = getObjectURL(this.files[0]); //获取图片的路径，该路径不是图片在本地的路径
                if (objUrl) {
                    $("#editVideoImg").attr("src", objUrl); //将图片路径存入src中，显示出图片
                }
            });

            //视频加载处理
            function getObjectURL(file) {
                var url = null;
                if (window.createObjectURL != undefined) { // basic
                    url = window.createObjectURL(file);
                } else if (window.URL != undefined) { // mozilla(firefox)
                    url = window.URL.createObjectURL(file);
                } else if (window.webkitURL != undefined) { // webkit or chrome
                    url = window.webkitURL.createObjectURL(file);
                }
                return url;
            }
        });
    </script>

    <style>
        td, th {
            text-align: center;
            padding: 0;
        }

        body::-webkit-scrollbar {
            display: none; /*隐藏滚动条*/
        }

        .content::-webkit-scrollbar {
            display: none; /*隐藏滚动条*/
        }
    </style>
</head>
<body>

<jsp:include page="header.jsp"/>
<div class="container-fluid">
    <div class="row" style="margin-top: 80px ;text-align:center;">
        <div class="col-md-12" style="padding: 0">
            <div class="col-md-8">
                <div class="row" style="text-align: left;margin-left: 10px;">
                    <button class="btn btn-primary queryVideo">查询子集</button>
                    <button class="btn btn-primary editVideo" data-toggle="modal" data-target="#editVideoModal">修改
                    </button>
                    <button class="btn btn-danger  deleteVideo ">删除</button>
                </div>

                <%--                        --%>

                <div class="row" style="max-height: 450px;overflow: auto;padding: 10px;padding-bottom: 0px;margin: 0">
                    <table class="table table-bordered" style="margin-bottom:0px ">
                        <thead>

                        <tr>
                            <th colspan="9">视频信息</th>
                        </tr>
                        <tr>
                            <th style="width: 200px">选择</th>
                            <th style="width: 200px">序号</th>
                            <th style="width: 200px">视频名称</th>
                            <th style="width: 200px">视频分类</th>
                            <th style="width: 200px">更新时间</th>
                            <th style="width: 200px">封面</th>
                            <th style="width: 200px">视频描述</th>
                            <th style="width: 200px">收藏数</th>
                            <%--<th style="width: 50px">操作</th>--%>
                        </tr>
                        </thead>
                        <tbody id="videoInfo">
                        <%
                            List<Video> videos = (List<Video>) request.getAttribute("videos");
                            Map<Long , Category> categoryMap =(Map<Long , Category>) request.getAttribute("categoryMap");
                            SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
                            for (int i = 0; i < videos.size(); i++) {
                                Video value = videos.get(i);
                                Long id = value.getId();
                                String date = simpleDateFormat.format(Long.valueOf(value.getUploadTime()));
                        %>
                        <tr>
                            <td style="width: 200px">
                                <input class="checkVideo" type="radio" name="selectVideo"
                                       data-id="<%=id%>" <%= i ==0 ?"checked":""%> >
                            </td>
                            <td style="width: 200px">
                                <%=i%>
                            </td>

                            <td style="width: 200px">
                                <%=value.getVideoName()%>
                            </td>
                            <td style="width: 200px"><%= categoryMap.get(value.getCategoryId()).getCategoryName() %>
                            </td>
                            <td style="width: 100px"><%= date %>
                            </td>
                            <td style="width: 200px"><img src="<%=request.getContextPath()+value.getVideoImg()%>" width="100px" height="60px" alt="">
                            </td>
                            <td style="width: 200px">
                                <%=value.getVideoDescription()%>
                            </td>
                            <td style="width: 200px">
                                <%=value.getCollectionCount()%>
                            </td>

                        </tr>
                        <%
                            }
                        %>

                        </tbody>
                    </table>
                </div>
                <!-- 修改视频模态框 -->
                <div class="modal fade" style="top: 50px" id="editVideoModal" tabindex="-1" role="dialog"
                     aria-labelledby="editVideoModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="editVideoModalLabel">修改视频信息</h4>
                            </div>
                            <div class="modal-body">
                                <div class="row">
                                    <div class="col-md-2"></div>
                                    <div class="col-md-8">
                                        <div class="row">
                                            <div class="form-group">
                                                <label for="editVideoName" class="col-sm-4 control-label"
                                                       style="line-height: 34px;padding-right: 0px">视频名称:</label>
                                                <div class="col-sm-8" style="padding-left: 0px">
                                                    <input type="text" class="form-control" id="editVideoName"
                                                           placeholder="视频名称">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="form-group">
                                                <label for="videoCategory" class="col-sm-4 control-label"
                                                       style="line-height: 34px;padding-right: 0px">视频分类:</label>
                                                <div class="col-sm-8" style="padding-left: 0px">
                                                    <select class="form-control" id="videoCategory">
                                                        <%
                                                            for (Long categoriesId : categoryMap.keySet()) {
                                                                Category category = categoryMap.get(categoriesId);
                                                        %>
                                                        <option value="<%= category.getId()%>"><%= category.getCategoryName()%>
                                                        </option>
                                                        <%
                                                            }
                                                        %>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="form-group">
                                                <label for="editVideoDes" class="col-sm-4 control-label"
                                                       style="line-height: 34px;padding-right: 0px">视频描述:</label>
                                                <div class="col-sm-8" style="padding-left: 0px">
                                                    <input type="text" class="form-control" id="editVideoDes"
                                                           placeholder="视频描述">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="form-group">
                                                <label for="selectImgFile" class="col-sm-4 control-label"
                                                       style="line-height: 34px;padding-right: 0px">视频略缩图:</label>
                                                <div class="col-sm-8" style="padding-left: 0px">
                                                    <input type="file" class="form-control" id="selectImgFile">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <img id="editVideoImg" src="../uploadFile/images/qqimg.png"
                                                 style="width: 160px;height: 100px">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-primary" id="editVideoBtn" data-id="-1">提交</button>
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="row" style="text-align: left;margin-left: 10px;">
                    <button class="btn btn-primary editVideoItem" data-toggle="modal" data-target="#addVideoItemModal">
                        添加子集
                    </button>
                </div>
                <div class="row" style="max-height: 450px;overflow: auto;padding: 10px;margin: 0">
                    <table class="table table-bordered" style="margin-bottom:0px ">
                        <thead>
                        <tr>
                            <th colspan="4">子集信息</th>
                        </tr>
                        <tr>
                            <th>序号</th>
                            <th>子集名称</th>
                            <th>集数</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="videoItemInfo">
                        </tbody>
                    </table>
                </div>
                <!-- 查看视频模态框 -->
                <div class="modal fade" style="top: 50px" id="queryVideoModal" tabindex="-1" role="dialog"
                     aria-labelledby="queryVideoModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close clo" data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="queryVideoModalLabel">查看视频</h4>
                            </div>
                            <div class="modal-body">
                                <div class="head" style="height: 400px;">
                                    <video width="100%" height="100%" controls="controls" id="videoItemSrc"
                                           src="../uploadFile/videos/0.mp4"></video>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default clo" data-dismiss="modal">关闭</button>
                            </div>
                        </div>
                    </div>
                </div>


                <!-- Modal -->
                <div class="modal fade" style="top: 50px" id="editVideoItemModal" tabindex="-1" role="dialog"
                     aria-labelledby="editVideoItemModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="editVideoItemModalLabel">修改子集信息</h4>
                            </div>
                            <div class="modal-body">
                                <div class="row">
                                    <div class="col-md-2"></div>
                                    <div class="col-md-8">
                                        <div class="row">
                                            <div class="form-group">
                                                <label for="editVideoItemName" class="col-sm-4 control-label"
                                                       style="line-height: 34px;padding-right: 0px">子集:</label>
                                                <div class="col-sm-8" style="padding-left: 0px">
                                                    <input type="text" class="form-control" id="editVideoItemName"
                                                           placeholder="视频名称">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="form-group">
                                                <label for="editSortCount" class="col-sm-4 control-label"
                                                       style="line-height: 34px;padding-right: 0px">集数:</label>
                                                <div class="col-sm-8" style="padding-left: 0px">
                                                    <input type="text" class="form-control" id="editSortCount"
                                                           placeholder="集数">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" id="updateVideoItemInfo" class="btn btn-primary">提交</button>
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal fade" style="top: 50px" id="addVideoItemModal" tabindex="-1" role="dialog"
                     aria-labelledby="addVideoItemModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="addVideoItemModalLabel">添加子集</h4>
                            </div>
                            <div class="modal-body">
                                <div class="row">
                                    <div class="col-md-2"></div>
                                    <div class="col-md-8">
                                        <div class="row">
                                            <div class="form-group">
                                                <label for="editVideoItemName" class="col-sm-4 control-label"
                                                       style="line-height: 34px;padding-right: 0px">视频子集:</label>
                                                <div class="col-sm-8" style="padding-left: 0px">
                                                    <input type="file" class="form-control" id="addVideoItem">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" id="insertVideoItem" class="btn btn-primary">提交</button>
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>
</div>
<jsp:include page="footer.jsp"/>
</body>
</html>
